<template>
  <div class="contain">
    <el-container style="height: 100%">
      <el-aside width="auto">
        <!-- 将展开收缩的判断数据传入该组件 -->
        <Aside :isCollapse="isCollapse"></Aside>
      </el-aside>
      <el-container>
        <el-header>
          <!-- 从子组件中接受传进来的数据 -->
          <Header
            @toggle="menuCollapse"
            :crumData="crumInfo"
            :gridData="gridData"
            :total="total"
            :exp_sdate="exp_sdate"
            :exp_edate="exp_edate"
          ></Header>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Aside from "../components/Aside";
import Header from "../components/Header";
import { mapState } from "vuex"; //注册state
export default {
  name: "app",
  data() {
    return {
      isCollapse: false,
      // 即将过期商户
      gridData: [],
      // 过期商户数量
      total: 0,
      // 到期时间
      exp_sdate: "",
      exp_edate: "",
      // 令牌
      myToken: ""
    };
  },
  components: {
    Aside,
    Header
  },
  methods: {
    // 创造初始化
    createdInit() {
      this.myToken = sessionStorage.getItem("myToken");
      // 验证是否携带令牌
      if (!this.myToken) {
        this.$router.push("/");
      }
      // 获取代理商信息
      this.$api.getAgentInformation(this.myToken).then(res => {
        if (res.succeed) {
          const {
            distributor_id,
            sv_sms_balance,
            sv_dw_balance,
            sv_d_name,
            sv_distributor_pay_enable
          } = res.values;
          this.$store.state.userName = sv_d_name;
          this.$store.state.userId = distributor_id;
          this.$store.state.msgMargin = sv_sms_balance;
          this.$store.state.accountBalance = sv_dw_balance;
          this.$store.state.payEnable = sv_distributor_pay_enable;
        }
      });
      //在页面加载时读取sessionStorage里的状态信息
      if (sessionStorage.getItem("store")) {
        this.$store.replaceState(
          Object.assign(
            {},
            this.$store.state,
            JSON.parse(sessionStorage.getItem("store"))
          )
        );
      }
      //在页面刷新时将vuex里的信息保存到sessionStorage里
      window.addEventListener("beforeunload", () => {
        sessionStorage.setItem("store", JSON.stringify(this.$store.state));
      });
    },
    // 初始化
    init() {
      // 格式化时间
      this.timeFormatting = this.utils.timeFormatting();
      // 当前时间
      this.exp_sdate = "2017-01-01 00:00:00";
      // 一个月内
      this.exp_edate = new Date().Format("yyyy-MM-dd hh:mm:ss");
      this.getOrderData();
    },
    // 改变菜单栏的状态
    menuCollapse() {
      this.isCollapse = !this.isCollapse;
    },
    // 获取过期用户
    getOrderData() {
      const urlParameter = {
        exp_sdate: this.exp_sdate,
        exp_edate: this.exp_edate
      };
      this.$api
        .getBusinesslistings(1, 5, "", urlParameter, this.myToken)
        .then(res => {
          const { dataList, total } = res;
          this.total = total;
          if (dataList) {
            this.gridData = dataList.map(v => {
              v.sv_versionexpiration = new Date(v.sv_versionexpiration).Format(
                "yyyy-MM-dd"
              );
              return {
                ...v
              };
            });
          }
        });
    }
  },
  computed: {
    // 配置面包屑的数据
    // this.$route.matched 获取每个路由组件的备注信息
    crumInfo() {
      const crumData = this.$route.matched;
      const crumArr = crumData.map(v => {
        return { path: v.path, name: v.meta.title };
      });
      return crumArr;
    },
    ...mapState(["userId"])
  },
  watch: {
    userId() {
      if (this.$route.query.y == 1) {
        this.$router.replace("index");
        this.$router.go(0);
      }
    }
  },
  created() {
    // 创造初始化
    this.createdInit();
  },
  updated() {
    // 创造初始化
    this.createdInit();
  },
  mounted() {
    // 初始化
    this.init();
  }
};
</script>

<style>
.el-breadcrumb {
  margin: 10px 0;
}
.contain {
  height: 100%;
}
/* 布局容器的样式 */
.el-header {
  background-color: #fff;
  color: #333;
  text-align: center;
  line-height: 70px;
  height: 70px !important;
  border-bottom: 3px solid;
  border-color: rgba(0, 0, 0, 0.1);
}

.el-aside {
  background-color: #f2f2f2;
  color: #333;
  text-align: center;
  height: 100%;
  min-width: 80px;
}

.el-main {
  background-color: #f1f1f1;
  color: #333;
  height: inherit;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>